<template>
    <div class="helper">
        <span class="left">{{ unFinishedTodoLenght }} items left</span>
        <span class="tabs">
            <span :class="selected === filterItem ? 'selected' : ''" @click="ItemSelected(filterItem)" v-for="filterItem of filterItems" :key="filterItem">
                {{ filterItem }}
            </span>
        </span>
        <span class="right" @click="clearAllTodos">Clear completed</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: 'all',
            filterItems: ['all', 'active', 'completed']
        }
    },
    props: {
        todoItems: {
            type: Array,
            require: true
        }
    },
    computed: {
        // 返回任务没有完成的todoItems的长度
        unFinishedTodoLenght() {
            return this.todoItems.filter(todo => !todo.checked).length
        }
    },
    methods: {
        ItemSelected(filterItem) {
            this.selected = filterItem
            this.$emit('toggleStatus', filterItem)
        },
        clearAllTodos() {
            this.$emit('clearAllTodos')
        }
    }
}
</script>

<style lang="stylus" scoped>
.helper {
    display flex
    justify-content space-between
    align-items center
    width 100%
    height 50px
    padding 10px
    box-sizing border-box
    .tabs {
        width 200px
        display flex
        justify-content space-between
        span {
            display inline-block
            padding 6px
            box-sizing border-box
            &.selected {
                border 1px solid red    
            }
        }
    }
}
</style>